<template>
  <div class="language-tag-form">
    <h3 class="section-title">语言能力</h3>
    
    <div class="language-input-section">
      <el-row :gutter="20">
        <el-col :span="8">
          <el-input
            v-model="newLanguage"
            placeholder="请输入语言名称"
            @keyup.enter="addLanguage"
          />
        </el-col>
        <el-col :span="8">
          <el-select
            v-model="newProficiency"
            placeholder="选择熟练度"
            style="width: 100%"
          >
            <el-option label="初级" value="beginner" />
            <el-option label="中级" value="intermediate" />
            <el-option label="高级" value="advanced" />
            <el-option label="母语" value="native" />
          </el-select>
        </el-col>
        <el-col :span="8">
          <el-button type="primary" @click="addLanguage" :disabled="!newLanguage || !newProficiency">
            <el-icon><Plus /></el-icon>
            添加语言
          </el-button>
        </el-col>
      </el-row>
    </div>
    
    <div v-if="languageList.length === 0" class="empty-state">
      <el-empty description="暂无语言技能，请添加" />
    </div>
    
    <div v-else class="language-tags">
      <el-tag
        v-for="(language, index) in languageList"
        :key="index"
        closable
        :type="getTagType(language.proficiency)"
        @close="removeLanguage(index)"
        class="language-tag"
      >
        {{ language.name }} - {{ getProficiencyText(language.proficiency) }}
      </el-tag>
    </div>
  </div>
</template>

<script>
import { Plus } from '@element-plus/icons-vue'

export default {
  name: 'LanguageTagInput',
  components: { Plus },
  props: {
    modelValue: {
      type: Array,
      default: () => []
    }
  },
  emits: ['update:modelValue'],
  data() {
    return {
      languageList: [...this.modelValue],
      newLanguage: '',
      newProficiency: ''
    }
  },
  watch: {
    modelValue: {
      handler(newVal) {
        this.languageList = [...newVal]
      },
      deep: true
    },
    languageList: {
      handler(newVal) {
        this.$emit('update:modelValue', newVal)
      },
      deep: true
    }
  },
  methods: {
    addLanguage() {
      if (!this.newLanguage || !this.newProficiency) {
        return
      }
      
      // 检查是否已存在相同语言
      const exists = this.languageList.some(lang => lang.name === this.newLanguage)
      if (exists) {
        this.$message.warning('该语言已存在')
        return
      }
      
      this.languageList.push({
        name: this.newLanguage,
        proficiency: this.newProficiency
      })
      
      this.newLanguage = ''
      this.newProficiency = ''
    },
    removeLanguage(index) {
      this.languageList.splice(index, 1)
    },
    getProficiencyText(proficiency) {
      const proficiencyMap = {
        beginner: '初级',
        intermediate: '中级',
        advanced: '高级',
        native: '母语'
      }
      return proficiencyMap[proficiency] || proficiency
    },
    getTagType(proficiency) {
      const typeMap = {
        beginner: '',
        intermediate: 'warning',
        advanced: 'success',
        native: 'danger'
      }
      return typeMap[proficiency] || ''
    }
  }
}
</script>

<style scoped>
.language-tag-form {
  margin-bottom: 24px;
}

.section-title {
  font-size: 16px;
  font-weight: 600;
  color: #303133;
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 2px solid #409eff;
}

.language-input-section {
  margin-bottom: 16px;
}

.empty-state {
  margin: 20px 0;
}

.language-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.language-tag {
  margin-right: 8px;
  margin-bottom: 8px;
  font-size: 14px;
}
</style> 